<template>
  <div class="system">
    <div style="margin-bottom:20px;">
      <el-button v-if="rid == 0" type="primary" @click="CreatCancle = true">创建账号</el-button>
    </div>
    <el-table :data="userData" border style="width: 100%">
      <el-table-column prop="username" label="账号名称" align="center">
      </el-table-column>
      <el-table-column prop="role_name" align="center" label="账号类型">
      </el-table-column>
      <el-table-column prop="position" align="center" label="联系人">
      </el-table-column>
      <el-table-column prop="mobile" align="center" label="联系方式">
      </el-table-column>
      <el-table-column prop="create_on" align="center" label="创建时间">
      </el-table-column>
      <el-table-column prop="address" align="center" label="操作">
        <template slot-scope="scope">
          <el-button type="text" v-if="rid == 0" class="editText" @click="exitUser(scope.row.id)">修改</el-button>
          <el-button type="text" v-if="rid == 0" class="deletText" @click="deleteUser(scope.row.id)">删除
          </el-button>
          <el-button type="text" v-if="rid == 0" class="ck" @click="resetUser(scope.row.id)">重置密码</el-button>
        </template>
      </el-table-column>
    </el-table>
    
    <el-dialog :destroy-on-close="true" :close-on-click-modal='false' title="创建账号" :visible.sync="CreatCancle"
      width="40%" center>
      <el-form ref="form" :model="form" label-width="100px" label-position="left">
        <el-form-item prop="username" label="账号名称">
          <el-input type="username" placeholder="请输入账号名称,将作为账号登录名" v-model="form.username"></el-input>
        </el-form-item>
        <el-form-item prop="role_name" label="账号类型">
          <el-input placeholder="请输入账号类型" v-model="form.role_name"></el-input>
          <!--  <el-select type="role_id"  style="width:100%;" v-model="form.role_id" placeholder="请选择账号类型">
              <el-option
                v-for="item in Role"
                :key="item.id"
                :label="item.role_name"
                :value="item.id">
              </el-option>
            </el-select> -->
        </el-form-item>
        <el-form-item prop="position" label="联系人名称">
          <el-input type="position" placeholder="请输入联系人名称" v-model="form.position"></el-input>
        </el-form-item>
        <el-form-item prop="mobile" label="联系人电话">
          <el-input type="mobile" placeholder="请输入联系人电话" v-model="form.mobile"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button type="button" class="pubBtn2" @click="CreatCancles">取消操作</el-button>
        <el-button type="button" class="pubBtn" @click="CreatSave('form')">确定创建</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import {
  SettingAuthList, SettingSave, SettingKeywordsList, SettingKeywordsDelete,
  SettingKeywordsAdd, keywordsUpdate, backUserIndex, backUserCreate,
  backUserUpdate, backUserDelete, backUserReset, getRole, backUserInfo
} from "@/api/admin"
export default {
  data() {
    return {
      // readonly: true,
      // activeName: 'first',
      // tableData: [],

      userData: [],// 账号列表

      // Role: [],
      // dynamicTags: [],
      // inputValue: '',
      // handleShow: false,
      // system: {
      //   rivals_num: null,
      //   notice_user_num: null,
      //   cost_warning_num: null,
      //   max_patent_num: null,
      //   sales_key_num: null
      // },
      // inputVisible: false,
      // editVal: '',
      // edId: null,

      CreatCancle: false,//创建账号弹窗

      form: {//创建账号表单
        username: "",
        role_name: "",
        position: "",
        mobile: "",
      },
      exitUserId: ""//修改账号id
    }
  },
  computed: {
    ...mapGetters([
      'sidebar',
      'avatar',
      'name',
      'roles',
      'type',
      'is_admin_view',
      'rid'
    ]),
  },
  async mounted() {
    this.getIndex();
    this.getList();
    this.getUserData();
    this.getRole();
  },
  methods: {
    async getRole() {
      try {
        this.Role = await getRole()
      } catch (e) {
        this.$message.error(e.message)
      }
    },
    async exitUser(id) {//修改账号
      try {
        this.exitUserId = id;
        this.CreatCancle = true;
        this.form = await backUserInfo({ id: id })
      } catch (e) {
        this.$message.error(e.message)
      }
    },
    deleteUser(id) {//删除账号
      this.$confirm('确定删除该用户吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        try {
          await backUserDelete({ id: id });
          this.getUserData();
          this.$message({
            type: 'success',
            message: '删除成功!'
          });
        } catch (e) {
          this.$message.error(e.message)
        }
      })
    },
    resetUser(id) {//重置密码
      this.$confirm('确定重置密码吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        try {
          await backUserReset({ id: id });
          this.getUserData();
          this.$message({
            type: 'success',
            message: '重置成功!'
          });
        } catch (e) {
          this.$message.error(e.message)
        }
      })
    },
    async getUserData() {//获取账号列表
      try {
        const res = await backUserIndex();
        this.userData = res
      } catch (e) {
        this.$message.error(e.message)
      }
    },
    async getIndex() {
      try {
        const res = await SettingAuthList()
        this.tableData = res.list;
        this.system = res.list;
      } catch (e) {
        this.$message.error(e.message)
      }

    },

    async getList() {
      try {
        const list = await SettingKeywordsList()
        this.dynamicTags = list.list
      } catch (e) {
        this.$message.error(e.message)
      }

    },
    cancle() {
      this.readonly = true;
      this.handleShow = false;
      this.$nextTick(_ => {
        this.$refs.myNameId.blur();
      });
      this.getIndex()
    },
    CreatCancles() {//创建账号弹窗取消
      this.exitUserId = '';
      this.CreatCancle = false;
    },
    async CreatSave(formName) {//创建账号保存
      if (this.exitUserId) {
        try {
          const {
            username,
            role_name,
            position,
            mobile,
          } = this.form;
          await backUserUpdate({
            username,
            role_name,
            position,
            mobile,
            id: this.exitUserId
          })
          this.exitUserId = '';
          this.$refs[formName].resetFields();
          this.CreatCancle = false;
          this.getUserData();
        } catch (e) {
          this.$message.error(e.message)
        }
      } else {
        try {
          const {
            username,
            role_name,
            position,
            mobile,
          } = this.form;
          await backUserCreate({
            username,
            role_name,
            position,
            mobile,
          })
          this.exitUserId = '';
          this.CreatCancle = false;
          this.$refs[formName].resetFields();
          this.getUserData();
          this.$alert('创建成功,默认密码123456。请尽快登录修改密码', {
            confirmButtonText: '确定',
            callback: action => {
              // this.$message({
              //   type: 'info',
              //   message: `action: ${ action }`
              // });
            }
          });
          // this.$message.success("")
        } catch (e) {
          this.$message.error(e.message)
        }
      }
    }

  }
}
</script>

<style scoped lang="less">
.pagination {
  margin: 15px 0;
}

.el-pagination {
  text-align: right;
}

.el-tag+.el-tag {
  margin-left: 10px;
}

.button-new-tag {
  margin-left: 10px;
  height: 32px;
  line-height: 30px;
  padding-top: 0;
  padding-bottom: 0;
}

.input-new-tag {
  width: 90px;
  margin-left: 10px;
  vertical-align: bottom;
}
</style>
